<template>
  <!-- <view class="popup-mask" @tap="handleMaskClick"> -->
  <view class="pop-containe" @tap.stop>
    <!-- <view class="popup-header">支付确认</view> -->
    <view class="popup-content">
      <view class="amount-row">
        <view class="amount-label">支付金额</view>
        <view class="amount-value">
          <text class="price">¥{{ totalPrice }}</text>
        </view>
      </view>

      <!-- <view class="balance-row">
          <view class="balance-label">账户余额</view>
          <view class="balance-value">¥{{ info.balanceA }}</view>
        </view> -->

      <!-- <view class="input-group">
          <view class="input-label">如需找人代付，请输入代付人推荐码</view>
          <input
            v-model="payerName"
            type="text"
            class="input-field"
            placeholder="请输入代付人推荐码"
            @input="handleInput"
          />
        </view> -->
    </view>

    <view class="popup-content">
      <view class="ss-label">订单详情</view>
      <view class="product-list">
        <view class="product-row" v-for="item in goodsData">
          <view class="">
            <view class="p-title">{{ item.goodsName }}</view>
            <view class="p-info"
              >{{ item.specificationsName }} x {{ item.quantity }}</view
            >
          </view>
          <text class="p-price">￥{{ item.amount }}</text>
        </view>
      </view>
    </view>

    <view class="pic-box" v-if="!over">
      <image :src="pic" mode="widthFix" class="pic" />
    </view>

    <!-- <textarea :value="pic" class="input-field"></textarea>

    <view class="button-group">
      <nut-button
        class="button button-cancel"
        @tap="handleCancel"
        type="default"
        >取消</nut-button
      >
      <nut-button
        class="button button-confirm"
        @tap="handleConfirm"
        type="primary"
      >
        支付完成
      </nut-button>
    </view> -->
  </view>
  <!-- </view> -->
</template>

<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { onMounted, ref, computed } from "vue";
import { store } from "@/store/index";
import http from "@/utils/http";
import { apiConfig } from "@/utils/config";

// 直接解构store中的响应式状态
const { info, user } = store.storeState;
const params = Taro.getCurrentInstance().router?.params;
console.log("params ###########", params);
const pic = apiConfig.baseURL + decodeURIComponent(params.pic);
const over = ref(params.status == 2);

const goodsData = ref([]);

const totalPrice = computed(() => {
  return goodsData.value
    .reduce((sum, item) => {
      return sum + item.amount;
    }, 0)
    .toFixed(2);
});

// const props = withDefaults(
//   defineProps<{
//     visible: boolean;
//     orderId: any;
//   }>(),
//   {
//     visible: false,
//     orderId: null,
//   }
// );
// const goods ref([])
onMounted(() => {
  http
    .postQuery(`/api/userOrder/getOrderDetail`, { orderId: params.id })
    .then((res) => {
      goodsData.value = res.data.map((i) => i.columns);
    });
});

// const emit = defineEmits<{
//   // (e: "update:visible", value: boolean): void;
//   (e: "cancel"): void;
//   (e: "confirm", param: any): void;
// }>();

const payerName = ref("");

const handleMaskClick = () => {
  // emit("update:visible", false);
  // emit("cancel");
};

const handleCancel = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

const handleConfirm = () => {
  const pages = Taro.getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const eventChannel = currentPage.getOpenerEventChannel();
  eventChannel.emit("backEvent", {
    data: "test",
  });

  Taro.navigateBack({
    delta: 1,
  });
};

const handleInput = (e) => {
  payerName.value = e.detail.value;
};
</script>

<style lang="scss">
.pop-containe {
  width: 100%;
  background-color: #fff;
  // border-radius: 24rpx;
  // overflow: hidden;
  // position: relative;
  // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  .popup-header {
    padding: 60rpx 48rpx 40rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    border-bottom: 2rpx solid #f5f5f5;
  }

  .popup-content {
    padding: 20rpx 48rpx;
  }

  .amount-row,
  .balance-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
  }

  .amount-label,
  .balance-label {
    font-size: 32rpx;
    color: #666;
  }

  .amount-value,
  .balance-value {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }

  .amount-value .price {
    color: #ff7631;
    font-size: 40rpx;
    font-weight: bold;
  }

  .input-group {
    margin-bottom: 60rpx;
  }

  .input-label {
    font-size: 24rpx;
    color: #3c8a3f;
    margin-bottom: 20rpx;
    display: block;
  }

  .input-field {
    width: 100%;
    height: 88rpx;
    border: 2rpx solid #e5e5e5;
    border-radius: 8rpx;
    padding: 0 24rpx;
    font-size: 32rpx;
    color: #333;
    box-sizing: border-box;
    background-color: #f9f9f9;
  }

  .input-field:focus {
    outline: none;
    border-color: #ff7631;
  }

  .button-group {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30rpx;
  }

  .ss-label {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 20rpx;
  }
  .product-list {
    overflow-y: auto;
    max-height: 30vh;
  }
  .product-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
    .p-title {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
    .p-info {
      font-size: 24rpx;
      color: #666;
    }
    .p-price {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }
  }

  .pic-box {
    width: 100%;
    height: 400rpx;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20rpx auto;
    .pic {
      background: #eee;
      width: 400rpx;
      height: 400rpx;
    }
  }

  .input-field {
    width: 100%;
    margin: 20rpx auto;
  }
}
</style>
